<template>
  <div class="asidewrap">
    <el-menu
      :unique-opened="true"
      :default-active="activePath||this.$route.path"
      class="el-menu-vertical-demo"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      :collapse="current"
      :collapse-transition="false"
      router
    >
      <el-submenu
        :index="menus.id | delnum"
        v-for="menus in MenuList"
        :key="menus.id"
      >
        <template slot="title">
          <i :class="iconobj[menus.id]"></i>
          <span>{{ menus.authName }}</span>
        </template>
        <el-menu-item
          :index="'/home/' + item.path"
          v-for="item in menus.children"
          :key="item.id"
          @click="saveactive(item.path)"
        >
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{ item.authName }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "asidewrap",
  data() {
    return {
    
      iconobj: {  //导航图标匹配
        125: "el-icon-user-solid",
        103: "el-icon-platform-eleme",
        101: "el-icon-s-goods",
        102: "el-icon-help",
        145: "el-icon-s-cooperation",
      },
      isCollapse: false,//折叠控制器
      activePath: this.$route.path,//默认导航样式被激活
    };
  },
  props: ["MenuList", "current"],//接收从父元素传来的数据
  filters: {//转字符串
    delnum(value) {
      return value.toString();
    },
  },

  created() {
    this.activePath = window.sessionStorage.getItem("activePath");//获取激活状态的路由路径
  },
  methods: {
    //保存当前激活路由的路径
    saveactive(val) {
      let actival = "/home/" + val;
      window.sessionStorage.setItem("activePath", actival);
      this.activePath = actival;
    },
  },

  computed: {},


  watch:{
    $route(){
      this.activePath = window.sessionStorage.getItem('activePath')
    }
  }

};
</script>
<style scoped lang="less">
.asidewrap {
  width: 100%;

  background-color: #333744;
}
.el-submenu {
  text-align: left;
}

.el-menu {
  border-right: none;
}

</style>